<template>
	<view id="index">
		<u-form class="form" :model="form" ref="uForm" labelWidth="80">
			<u-form-item label="学号" prop="leaveType" @click="LeaveTypeShow = true;">
				<u--input v-model="form.sno" disabled disabledColor="#ffffff" placeholder="请选择请假类型"></u--input>
			</u-form-item>

			<u-form-item label="姓名" prop="leaveType" @click="LeaveTypeShow = true;">
				<u--input v-model="form.stuName" disabled disabledColor="#ffffff" placeholder="请选择请假类型"></u--input>
			</u-form-item>

			<u-form-item label="请假类别" prop="leaveType" @click="LeaveTypeShow = true;">
				<u--input v-model="form.parentLevelId == null ? '请假':'延假'" disabled Color="#ffffff"
					placeholder=""></u--input>
			</u-form-item>

			<u-form-item label="请假类型" prop="leaveType" @click="LeaveTypeShow = true;">
				<u-input :value="item.name" v-for="(item,index) in LeaveTypesOptions"
					v-if="item.value == form.leaveType" disabled />
			</u-form-item>

			<u-form-item label="请假原因" prop="cause">
				<uni-easyinput type="textarea" maxlength="200" disabled v-model="form.cause" trim="all"
					placeholder="请输入请假原因"></uni-easyinput>
			</u-form-item>

			<u-form-item label="开始时间" prop="beginTime">
				<u--input v-model="form.beginTime" disabled disabledColor="#ffffff" placeholder="请选择开始时间"></u--input>
			</u-form-item>

			<u-form-item label="截至时间" prop="endTime">
				<u--input v-model="form.endTime" disabled disabledColor="#ffffff" placeholder="请选择截至时间"></u--input>
			</u-form-item>

			<u-form-item label="天数" prop="duration">
				<view v-if="form.parentLevelId == null">{{form.duration / 10}} 天</view>
				<view v-else>{{form.duration}} 天</view>
			</u-form-item>

			<u-form-item label="图片" prop="files">
				<view v-if="fileList.length == 0"> 无图片 </view>
				<u-image v-else :src="item" mode="" style="margin-right: 4rpx;" width="60" height="60"
					v-for="(item,index) in fileList" :key="index" @click="imgPreview()"></u-image>
			</u-form-item>

			<div v-show="oldSta  ==  1">
				<u-form-item :required="true" label="审核状态" prop="status">
					<u-radio-group v-model="form.status">
						<u-radio style="margin-right: 20rpx;" v-for="(item, index) in RodList" :key="item.value"
							:name="item.value" :label="item.name" :disabled="item.disabled">
						</u-radio>
					</u-radio-group>
				</u-form-item>

				<view v-show="form.status == '2'">
					<u-form-item :required="true" label="更换流程" prop="process">
						<u-radio-group v-model="form.process">
							<u-radio style="margin-right: 20rpx;" v-for="(item, index) in LuiList" :key="item.value"
								:name="item.value" :label="item.name" :disabled="item.disabled">
							</u-radio>
						</u-radio-group>
					</u-form-item>
				</view>

				<view v-if="form.process == '1'">
					<u-form-item :required="true" label="审核部门" prop="auditDp">
						<u-radio-group v-model="form.auditDp">
							<view>
								<u-radio style="margin-top: 10rpx;" v-for="(item, index) in auditDpOptions"
									:key="item.deptId" :name="item.deptId" :label="item.deptName" :disabled="false">
								</u-radio>
							</view>
						</u-radio-group>
					</u-form-item>
				</view>

				<u-form-item :required="true" label="审批意见" prop="reason">
					<uni-easyinput type="textarea" maxlength="200" v-model="form.reason" trim="all"
						placeholder="请输入审批意见"></uni-easyinput>
				</u-form-item>

				<u-button class="button" text="提交" type="primary" @click="submitAppltLeave()"></u-button>
			</div>
		</u-form>
	</view>

</template>

<script>
	import {
		getDicts
	} from "@/api/system/dict/data";
	import {
		getUser
	} from "@/utils/auth";
	import upload from "@/utils/upload";
	import {
		listOldLeave,
		auditLeave
	} from "@/api/backend/leave";
	import {
		getListResources
	} from "@/api/backend/fileResources";
	import {
		listLeaveDep
	} from "@/api/system/dept";


	export default {
		name: "leaveDetails",
		onShow() {
			getDicts("leave_types").then((response) => {
				//遍历字典数组并重新赋值LeaveTypesOptions
				this.LeaveTypesOptions = response.data.map(item => {
					return {
						name: item.dictLabel,
						value: item.dictValue
					};
				});
			});
			this.user = getUser();
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules);
		},
		data() {
			return {
				LeaveTypesOptions: null,
				form: {
				},
				fileList: [],
				auditDpOptions: [],
				oldSta: 0,
				RodList: [{
						name: '通过',
						value: '2',
						disabled: false
					},
					{
						name: '不通过',
						value: '3',
						disabled: false
					}
				],
				LuiList: [{
						name: '是',
						value: '1',
						disabled: false
					},
					{
						name: '否',
						value: '2',
						disabled: false
					}
				],
				rules: {
					status: {
						required: true,
						message: "请选择审核状态",
						trigger: ["blur", "change"],
					},
					process: {
						required: true,
						message: "请选择是否更换流程",
						trigger: ["blur", "change"],
					},
					auditDp: {
						required: true,
						message: "请选择跟换的部门",
						trigger: ["blur", "change"],
					},
					reason: {
						type: "string",
						required: true,
						message: "请输入审核意见",
						trigger: ["blur", "change"],
					},
				},
			}
		},
		methods: {
			imgPreview() {
				uni.previewImage({
					indicator: "number",
					loop: true,
					urls: this.fileList
				})
			},
			onLoad(options) {
				var data = JSON.parse(options.item); // 字符串转对象
				this.form = data;
				this.oldSta = this.form.status;
				this.form.status = '2';
				this.getlistLeaveDep();
				this.getImgInfos(this.form.fileIds)
				if (this.form.parentLevelId != null) {
					var date = {
						Id: this.form.parentLevelId
					}
					listOldLeave(date).then(response => {
						this.form.beginTime = response.rows[0].beginTime;
						let time = new Date(this.form.endTime).getTime() - new Date(this.form.beginTime).getTime();
						let day = Math.floor(time / (24 * 60 * 60 * 1000)); // 计算天数
						let hour = Math.floor((time % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000)); // 计算小时数
						if (hour == 0) {
							this.form.duration = day;
						} else if (hour <= 12) {
							this.form.duration = day + 0.5;
						} else {
							this.form.duration = day + 1;
						}
					});
				}
			},
			
			/**  获取图片信息  */
			getImgInfos(fileIds) {
				if (fileIds != null && fileIds != "" && fileIds != "undefined") {
					var Info = {
						fileIds: fileIds
					}
					getListResources(Info).then(response => {
	
						var list = response.rows;
						list.map((item) => {
							this.fileList.push(
								'http://localhost:8087' + item.path
							)
						})
					});
				}
			},
			getlistLeaveDep() {
				listLeaveDep().then(response => {
					this.auditDpOptions = response.data;
				});
			},

			submitAppltLeave() {
				this.$refs.uForm.validate().then(res => {
					auditLeave(this.form).then(response => {
						uni.$u.toast('审核成功！')
						setTimeout(() => {
							this.$tab.reLaunch('/pages/leaveAudit/index')
						}, 800);
					});
				}).catch(errors => {
					uni.$u.toast('请填写完整信息')
				});

			}
		}
	}
</script>
<style lang="scss" scoped>
	page {
		background-color: #ffffff;
	}
</style>
<style lang="scss" scoped>
	#index {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 750rpx;
		// height: 90vh;
		background-color: #ffffff;
		padding: 70rpx 0;
		font-size: 20rpx;

		.form {
			width: 600rpx;
			// height: 90vh;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.button {
				margin-top: 30rpx;
			}
		}
	}
</style>